<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app"></div>
  <script src="../js/vue.js"></script>
  <script>

    //创建子组件
    const box = {
      props: {
        total: Number,
      },
      template: `
        <div>传递的数据:{{total}}</div>
        <!--单向数据流,这个total是不允许被修改的-->
        <button @click="total++">修改</button>
      `
    }



     // 1.创建Vue的实例对象
     const app = Vue.createApp({
      data(){
        return {
          count: 100,
        }
      },
     //挂载子组件
     components: {
        box,
     },
     template: `
        <!-- 子组件里面有个 total,我们传进来和count绑定-->
        <box :total="count"></box>
     `
     });

     app.mount('#app');
  </script>
</body>
</html>